<template>
  <el-dialog :visible.sync="dialogVisible" :fullscreen="true">
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>品号</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="productionmodelInJson.Code"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>品名</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="productionmodelInJson.Name"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>单位</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="productionmodelInJson.Unit"></el-input>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-span-c">
        <span>规格</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="productionmodelInJson.Specification"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>标价</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input type="number" v-model="productionmodelInJson.Price"></el-input>
      </el-col>
      <el-col class="el-span-c">
        <span>简码</span>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-input v-model="productionmodelInJson.ShortCode"></el-input>
      </el-col>
      <el-col class="el-span-c"></el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox label="组合装" v-model="productionmodelInJson.Combination"></el-checkbox>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[0].Name"
          v-model="productionmodelInJson.Dimension1"
        ></el-checkbox>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[1].Name"
          v-model="productionmodelInJson.Dimension2"
        ></el-checkbox>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[2].Name"
          v-model="productionmodelInJson.Dimension3"
        ></el-checkbox>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[3].Name"
          v-model="productionmodelInJson.Dimension4"
        ></el-checkbox>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[4].Name"
          v-model="productionmodelInJson.Dimension5"
        ></el-checkbox>
      </el-col>
    </el-row>
    <el-row class="el-low-c" type="flex" justify="start" align="middle">
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[5].Name"
          v-model="productionmodelInJson.Dimension6"
        ></el-checkbox>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[6].Name"
          v-model="productionmodelInJson.Dimension7"
        ></el-checkbox>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[7].Name"
          v-model="productionmodelInJson.Dimension8"
        ></el-checkbox>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[8].Name"
          v-model="productionmodelInJson.Dimension9"
        ></el-checkbox>
      </el-col>
      <el-col class="el-input-normal-c">
        <el-checkbox
          :label="this.$store.state.modules.dimension[9].Name"
          v-model="productionmodelInJson.Dimension10"
        ></el-checkbox>
      </el-col>
    </el-row>
    <div
      slot="title"
      style="border-bottom: 1px dashed #dcdfe6;font-size: larger;padding-bottom: 10px;"
    >
      <span>数据管理</span>
      <hr style="border:1 dashed " width="100%" color="#DCDFE6" size="1">
      <div>
        <el-button-group>
          <el-button size="mini" type="primary" @click="onSubmit">保存</el-button>
          <el-button size="mini" :disabled="delDisable" @click="onDelete">删除</el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
        </el-button-group>
      </div>
    </div>
    <div slot="footer" style="border-top: 1px dashed #dcdfe6;font-size: larger;padding-top: 10px;"></div>
  </el-dialog>
</template>
<script>
import { delProduction, setProduction } from '@/api/production'
import { Model } from 'vue-property-decorator'
export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      productionmodelInJson: {}
    }
  },
  watch: {
    productionmodel: function(value) {
      this.productionmodelInJson = value
    }
  },
  computed: {
    delDisable: function() {
      return (
        this.productionmodelInJson.AutoId === undefined ||
        this.productionmodelInJson.AutoId === 0
      )
    }
  },
  props: { productionmodel: Object },
  methods: {
    onSubmit() {
      setProduction(this.productionmodelInJson)
        .then(response => {
          if (response.Result === 0) {
            this.productionmodelInJson = response.Data
            this.$message('保存成功')
            this.$emit('productionSaveComplete', this.productionmodelInJson)
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          // this.$alert(error, '错误')
        })
    },
    onDelete() {
      delProduction(this.productionmodelInJson)
        .then(response => {
          if (response.Result === 0) {
            this.$message('删除成功')
            this.dialogVisible = false
            this.$emit(
              'productionDelComplete',
              this.productionmodelInJson.AutoId
            )
            this.productionmodelInJson = {}
          } else {
            this.$alert(response.Message, '失败')
          }
        })
        .catch(error => {
          // this.$alert(error, '错误')
        })
    }
  }
}
</script>

<style>
.el-span-c {
  padding: 5px;
  height: 40px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}
.el-input-normal-c {
  width: 300px;
  height: 40px;
  text-align: left;
}
.el-input-large-c {
  width: 500px;
  height: 40px;
  text-align: left;
}
.el-low-c {
  height: 40px;
  margin-bottom: 15px;
  text-align: left;
}
</style>